@import "~terriajs-variables";

.legend {
  composes: clearfix from "../../../Sass/common/_base.scss";
  composes: list-reset from "../../../Sass/common/_base.scss";
  font-family: $font-mono;
  font-size: $font-size-small;

  li {
    display: block;
  }
  .legendImagehasError {
    display: none;
  }
}

.legend__inner {
  a {
    // Only the actual legend should be clickable rather than the whole area
    display: inline-block;
  }
  img {
    display: inline-block;
    background: #fff;
    max-width: 100%;
  }
  padding: $padding 0 0 0;
}

.legend--svg {
  text {
    fill: #fff;
  }
  :global .tick-mark {
    stroke: #fff;
  }
  svg {
    width: 100%;
    display: block;
    :global rect.background {
      width: 100%;
      fill: rgba(#fff, 0.15);
    }
  }
}

.loader {
  font-family: $font-base;
  svg {
    fill: #fff;
  }
}

.imageAnchor {
  max-width: 100%;
}
